<template>
  <div class="home">
    <!-- 头部 -->
    <HomeHeader></HomeHeader>

    <!-- Hsynopsis -->
    <div class="Hsynopsis">
      <div class="block">
        <a href="#" class="HsynopsisL">
          <img src="../../static/images/HsynopsisL.jpg" />
          <span>超级秀|三菱电机“红”动工博会</span>
        </a> 
        <ul class="HsynopsisR">
          <li>
            <a href="#">
              <h4>智创·共生——三菱电机“2018首届中国国际进口博览会”开启合作新篇章开启合作新篇</h4>
              <span>
                <p>中国国际工业博览会 (China International Industry Fair) 于 2018 年9月19日至23日</p>
                <em>2018.10.11</em>
                <div class="clear"></div>
              </span>
            </a>
          </li>
          <li>
            <a href="#">
              <h4>好风凭借力，青春正当时——三菱电机助力2018 IEEE国际未来能源挑战赛 </h4>
              <span>
                <p>IFEC，这一国际上新能源发电领域最高级别的大学生创新竞赛，一直以来，备受业界关注。而功率器件又是推动未来能源及节能事业的关键。作为在功率器件领域深耕多年的三菱电机，自然不会放过这一与业界交流的机会，以金牌赞助商的身份参与到今年的大赛中。</p>
                <em>2018.09.15</em>
                <div class="clear"></div>
              </span>
            </a>
          </li>
          <li>
            <a href="#">
              <h4>新建工业机器人及配套控制器生产项目</h4>
              <span>
                <p>我公司新建工业机器人及配套控制器生产项目（年产工业机器人4800套、配套控制</p>
                <em>2018.10.11</em>
                <div class="clear"></div>
              </span>
            </a>
          </li>
          <li>
            <a href="#">
              <h4>三菱电机发售热敏二极管红外传感器</h4>
              <span>
                <p>电机株式会社将于11月1日发售热敏二极管红外传感器，该产品能够做到高精度识别人员和物体并理解其行为，可用于犯罪预防系统、空调设备、智能建筑系统以及人数统计系统等众多领域。</p>
                <em>2018.09.31</em>
                <div class="clear"></div>
              </span>
            </a>
          </li>
        </ul>
        <div class="clear"></div>
      </div>
    </div>

    <!-- 创新产品 -->
    <div class="Hprod">
      <div class="block">
        <!-- Htit -->
        <div class="Htit">
          <div>
            <h2>创新产品</h2>
          </div>
          <div class="HtitM">
            <a href="#">
              <img src="../../static/images/Htit1.png" />
            </a>
          </div>
          <div class="clear"></div>
        </div>
        <div class="HprodPC">
          <div class="HprodPCS">
            <div v-swiper:mySwiper="HprodPCS">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <a href="#">
                    <img src="../../static/images/HprodPCS1.jpg" />
                    <div class="HprodPCST">
                      <p>控制器</p>
                    </div>
                    <div class="HprodPCSE">
                      <p>可编程控制器MELSEC</p>
                      <p>伺服系统控制器</p>
                      <p>计算机数字控制器（CNC）</p>
                    </div>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href="#">
                    <img src="../../static/images/HprodPCS2.jpg" />
                    <div class="HprodPCST">
                      <p>驱动产品</p>
                    </div>
                    <div class="HprodPCSE">
                      <p>AC伺服</p>
                      <p>变频器</p>
                      <p>马达</p>
                      <p>电磁离合器和制动器</p>
                      <p>张力控制器</p>
                    </div>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href="#">
                    <img src="../../static/images/HprodPCS3.jpg" />
                    <div class="HprodPCST">
                      <p>可视化</p>
                    </div>
                    <div class="HprodPCSE">
                      <p>人机界面(HMI)-GOT</p>
                    </div>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href="#">
                    <img src="../../static/images/HprodPCS4.jpg" />
                    <div class="HprodPCST">
                      <p>工业机器人</p>
                    </div>
                    <div class="HprodPCSE">
                      <p>工业机器人-MELFA</p>
                    </div>
                  </a>
                </div>
                <div class="swiper-slide">
                  <a href="#">
                    <img src="../../static/images/HprodPCS5.jpg" />
                    <div class="HprodPCST">
                      <p>低压配电产品</p>
                    </div>
                    <div class="HprodPCSE">
                      <p>低压断路器</p>
                      <p>接触器与马达起动器</p>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-pagination swiper-pagination-bullets HprodPCSpagination"></div>
            </div>
          </div>
        </div>
        <div class="HprodMOB">
        </div>

      </div>
    </div>

    <!-- 解决方案 -->
    <div class="block">
      <div class="Hsolve">
        <!-- Htit -->
        <div class="Htit Htits">
          <div>
            <h2>解决方案</h2>
          </div>
          <div class="HtitM">
            <a href="#">
              <img src="../../static/images/Htit2.png" />
            </a>
          </div>
          <div class="clear"></div>
        </div>
        <div class="HsolveC">
          <a href="#" class="HsolveCL">
            <img src="../../static/images/HsolveCL.jpg" class="HsolveCLimg"/>
            <div class="HsolveCLE">
              <img src="../../static/images/HsolveCLE.jpg"/>
              <p>为了实现工厂整体最优化，拥有丰富FA产品的三菱电机将信息系统和生产现场进行了联合。</p>
              <h4>了解更多</h4>
            </div>
            <div class="clear"></div>
          </a>
          <div class="HsolveCR">
            <ul>
              <li>
                <a href="#">
                  <div class="HsolveCRT">
                    <p>各行业解决方案</p>
                  </div>
                  <div class="HsolveCRE">
                    <img src="../../static/images/HsolveCRE1.jpg"/>
                    <div class="HsolveCREC">
                      <h2>通过整个制造工厂提出解决各行业客户课题的方案</h2>
                      <span>
                        <p>汽车制造</p>
                        <p>食品/药品/化妆品</p>
                        <p>智能手机/平板</p>
                        <p>社会基础设施</p>
                      </span>
                      <h3>了解更多</h3>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="HsolveCRT">
                    <p>各产品解决方案</p>
                  </div>
                  <div class="HsolveCRE">
                    <img src="../../static/images/HsolveCRE2.jpg"/>
                    <div class="HsolveCREC">
                      <h2>利用三菱电机的丰富FA产品，为各个领域提供最佳解决方案</h2>
                      <span>
                        <p>机器人解决方案</p>
                        <p>iQ Monozukuri</p>
                      </span>
                      <h3>了解更多</h3>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="HsolveCRT">
                    <p>课题解决方案</p>
                  </div>
                  <div class="HsolveCRE">
                    <img src="../../static/images/HsolveCRE3.jpg"/>
                    <div class="HsolveCREC">
                      <h2>课题解决方案简介</h2>
                      <span>
                        <p>课题解决方案1</p>
                        <p>课题解决方案2</p>
                      </span>
                      <h3>了解更多</h3>
                    </div>
                  </div>
                </a>
              </li>
              <div class="clear"></div>
            </ul>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>

    <!-- 资料中心 -->
    <div class="Hdata">
      <div class="block">
        <!-- Htit -->
        <div class="Htit">
          <div>
            <h2>资料中心</h2>
          </div>
          <div class="HtitM">
            <a href="#">
              <img src="../../static/images/Htit1.png" />
            </a>
          </div>
          <div class="clear"></div>
        </div>
        <div class="HdataC">
          <div class="HdataCL">
            <div class="HdataCLN">                                
              <a href="javascript:;" class="on">ALL</a>
              <a href="javascript:;">认证</a>
              <a href="javascript:;">样本</a>
              <a href="javascript:;">手册</a>
              <a href="javascript:;">软件</a>
              <a href="javascript:;">CAD</a>
              <a href="javascript:;">视频</a>
              <a href="javascript:;">样本库</a>
              <a href="javascript:;">其他</a>
              <div class="clear"></div>
            </div>
            <div class="HdataCLSon">
              <ul class="HdataCLS">
                <li>
                  <a href="#">
                    <h2>【软件下载】EMU4-SW1 Ver.1.2.1</h2>
                    <h3>产品类别</h3>
                    <h4>样本</h4>
                    <p>2019-10-22</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h2> 【软件下载】GT Works3 1.220E</h2>
                    <h3>产品类别</h3>
                    <h4>样本</h4>
                    <p>2019-10-22</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h2>【软件下载】NC Analyzer2</h2>
                    <h3>产品类别</h3>
                    <h4>样本</h4>
                    <p>2019-10-22</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h2>【手册下载】M800 M80 E80 C80 Series PLC Interface Manual_ib1501272engk</h2>
                    <h3>产品类别</h3>
                    <h4>样本</h4>
                    <p>2019-10-17</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h2>新· 向未来 | 三菱电机2019工博会开启智能制造新篇章</h2>
                    <h3>产品类别</h3>
                    <h4>样本</h4>
                    <p>2019-10-17</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h2>重磅！三菱电机激光加工自动化分拣系统正式在中国发售</h2>
                    <h3>产品类别</h3>
                    <h4>样本</h4>
                    <p>2019-10-27</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h2>2019工博会 | 三菱电机智能制造新跃升</h2>
                    <h3>产品类别</h3>
                    <h4>样本</h4>
                    <p>2019-10-27</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h2>第十三届“三菱电机杯“全国大学生电气与自动化大赛逐梦未来</h2>
                    <h3>产品类别</h3>
                    <h4>样本</h4>
                    <p>2019-10-27</p>
                    <div class="clear"></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="HdataCR">
            <img src="../../static/images/HdataCR.jpg" class="HdataCRimg"/>
            <div class="HdataCRF">
              <div class="HdataCRFI">
                <p>产品大类：</p>
                <select>
                  <option>请选择</option>
                </select>
                <div class="clear"></div>
              </div>
              <div class="HdataCRFI">
                <p>产品小类：</p>
                <select>
                  <option>请选择</option>
                </select>
                <div class="clear"></div>
              </div>
              <div class="HdataCRFI">
                <p>资料种类</p>
                <select>
                  <option>请选择</option>
                </select>
                <div class="clear"></div>
              </div>
              <button class="HdataCRFsub">搜  索 <img src="../../static/images/HdataCRFsub.png"/></button>
              <div class="clear"></div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>

    <!-- 培训中心 -->
    <div class="Htrain">
      <div class="block">
         <!-- Htit -->
        <div class="Htit Htits">
          <div>
            <h2>培训中心</h2>
          </div>
          <div class="HtitM">
            <a href="#">
              <img src="../../static/images/Htit2.png" />
            </a>
          </div>
          <div class="clear"></div>
        </div>
        <div class="HtrainC">
          <div class="HtrainCL">
            <img src="../../static/images/HtrainCL1.jpg" class="HtrainCLimg"/>
            <div class="HtrainCLE">
              <div class="HtrainCLET">
                <p>最新e-Learning课程</p>
              </div>
              <ul class="HtrainCLES">
                <li>
                  <a href="#">e-Learning课程《CC-Link IE Field网络(MELSEC iQ-R系列篇) 》</a>
                </li>
                <li>
                  <a href="#">e-Learning课程 MELSERVO基础(MR-J4-GF)伺服驱动器I/O模式篇</a>
                </li>
                <li>
                  <a href="#">e-Learning课程在线学习相关设置问题</a>
                </li>
                <li>
                  <a href="#">e-Learning课程——【PLC维护】</a>
                </li>
                <li>
                  <a href="#">e-Learning课程——【MELSEC-F系列基础】</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="HtrainCL HtrainCLs">
            <img src="../../static/images/HtrainCL2.jpg" class="HtrainCLimg"/>
            <div class="HtrainCLE">
              <div class="HtrainCLET">
                <p>最近FATEC课程</p>
              </div>
              <ul class="HtrainCLEC">
                <li>
                  <a href="#">
                    <h3>Q系列PLC实践课程</h3>
                    <h4>上海</h4>
                    <p>2019.10.21-2019.10.23</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>GOT1000进阶课程</h3>
                    <h4>上海</h4>
                    <p>2019.10.21-2019.10.23</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>伺服定位控制综合应用课程</h3>
                    <h4>上海</h4>
                    <p>2019.10.21-2019.10.23</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>现场总线CC-Link进阶课程...</h3>
                    <h4>上海</h4>
                    <p>2019.10.21-2019.10.23</p>
                    <div class="clear"></div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>交流变频器实践课程</h3>
                    <h4>上海</h4>
                    <p>2019.10.21-2019.10.23</p>
                    <div class="clear"></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="HtrainCR">
            <ul>
              <li>
                <a href="#">
                  <img src="../../static/images/HtrainCR1.jpg" />
                  <span>
                    <p>培训机构</p>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="../../static/images/HtrainCR2.jpg" />
                  <span>
                    <p>证书查询</p>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="../../static/images/HtrainCR3.jpg" />
                  <span>
                    <p>学习向导</p>
                  </span>
                </a>
              </li>
              <div class="clear"></div>
            </ul>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    
    <!-- Habout -->
    <div class="block">
      <div class="Habout">
        <div class="HaboutL">
          <img src="../../static/images/HaboutL.jpg" />
        </div>
        <div class="HaboutR">                            
          <!-- Htit -->
          <div class="Htit">
            <div class="HtitM">
              <a href="#">
                <img src="../../static/images/Htit2.png" />
              </a>
            </div>
            <div class="clear"></div>
          </div>
          <h2 class="HaboutRtit">三菱电机自动化（中国）有限公司</h2>
          <div class="HaboutRN">
            <a href="javascript:;" class="on">公司简介</a>
            <a href="javascript:;">经营理念</a>
            <a href="javascript:;">社会责任</a>
            <a href="javascript:;">加入我们</a>
            <a href="javascript:;">联系我们</a>
            <div class="clear"></div>
          </div>
          <div class="HaboutRC">
            <div class="HaboutRCE">
              <p>三菱电机的工业自动化产品自六十年代进入中国，如今已被广泛应用于汽车、纺织、包装印刷、食品饮料、电子半导体、机床、新能源等领域，见证了中国工业的发展。同时，也为社会基础设施建设提供有力支持，例如楼宇、电力、水处理、轨道交通等。</p>
              <p>三菱电机FA事业在中国的开展，从1993年设立“菱电国际（上海）有限公司”开始。随着中国经济的发展，事业不断扩大。从本地化生产，到全国服务网络的完善；从产品的推广销售，到综合解决方案的提供；从TCOE（Total Cost of Ownership Engineering）降低客户综合成本到TVOE（Total Value of Ownership Engineering）为客户提供综合价值方案，三菱电机着眼于未来，不断变革和创新，与时俱进。</p>
            </div>
          </div>
          <a href="javascript:;" class="HaboutRmore">了解更多</a>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>


    

  </div>

</template>

<script>
import $ from "jquery";
import "@/assets/css/home.css";
import HomeHeader from "@/components/header";
import HomeHooter from "@/components/footer";

export default {
  name: "home",
  data() {
    return {
      HprodPCS: {
        loop: true,
        slidesPerView: "auto",
        centeredSlides: true,
        slidesPerView: 5,
        spaceBetween: 20,
        pagination: {
          el: ".HprodPCSpagination"
        },
        on: {
          slideChange() {
            console.log("onSlideChangeEnd", this);
          },
          tap() {
            console.log("onTap", this);
          }
        }
      },
    };
  },
  components: {
    HomeHeader,
    HomeHooter,
  },
  methods: {
    
    
   
  },
  
};
</script>

<style scoped>
</style>
